<template>
  <uni-popup type="bottom" ref="uniPopup">
    <view class="pick-box">
      <view class="box-top">
        <view class="top-left" @click="onCancel()">
          取消
          <!--   取消 select{{selectValue}} -->
        </view>
        <view class="top-right" @click="onConfirm()">
          <!--          确定 begin{{beginTime}} -->
          确定
        </view>
      </view>
      <view class="box-content">
        <picker-view :value="initValue" @change="pickerChange" class="picker-view" :indicator-style="indicatorStyle"
          @tap.stop="()=>{return}">
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in years" :key="index">{{item}}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in months" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  data() {
    return {
      initValue: [0, 0],
      selectValue: [0, 0],
	  // years:['2019','2020','2021','2022','2023'],
	  months:['01','02','03','04','05','06','07','08','09','10','11','12'],
    }
  },
  props: {
	  years:{
		  type: Array,
		 default: () => {
		   const now = new Date()
		   return [now.getFullYear()]
		 }
	  },
    beginTime: {
      type: Array,
      default: () => {
        const now = new Date()
        return [now.getFullYear(), now.getMonth(), now.getDate()]
      }
    }
  },
  mounted() {
  
  },
  created() {
	  this.years.forEach((item,index)=>{
		if( item==this.beginTime[0] ){
			this.initValue[0] = index;
			this.selectValue[0] = index;
		}
	  })
	  this.months.forEach((item,index)=>{
		if( item== this.beginTime[1] ){
			this.selectValue[1] = index;
			this.initValue[1] = index;
		}
	  })
  },
  computed: {
    indicatorStyle() {
      return 'height: 88rpx;'
    },
  },
  
  methods: {
    onOpen() {
      this.$refs.uniPopup.open()
    },
    pickerChange(e) {
      this.selectValue = e.detail.value
	  console.log(' this.selectValue', this.selectValue);
    },
    onCancel() {
      this.$refs.uniPopup.close()
    },
    onConfirm() {
      const date = [this.years[this.selectValue[0]], this.months[this.selectValue[1]] ]
	  this.initValue = this.selectValue;
      this.$emit('onDateConfirm', date)
      this.$refs.uniPopup.close()
    }
  }
}
</script>

<style lang="scss" scoped>
  .pick-box {
    width: 100%;
    height: 600rpx;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
	border-radius: 15rpx 15rpx 0 0;

    .box-top {
      display: flex;
      height: 90rpx;
	  font-size: 30rpx;
      justify-content: space-between;
      flex-direction: row;
      // background-color: #007AFF;
	  border-bottom: 1rpx solid #f2f2f2;

      .top-left {
        padding-left: 20rpx;
        // font-size: 35rpx;
        line-height: 90rpx;
        color: #888888;
      }

      .top-right {
        // font-size: 35rpx;
        line-height: 90rpx;
        padding-right: 20rpx;
        color: #007AFF;
      }
    }

    .box-content {
      flex: 1;
      // background-color: #007AFF;
      padding-top: 30rpx;
      padding-bottom: 10rpx;

      .picker-view {
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;

        .picker-item {
          font-size: 32rpx;
          height: 88rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
        }
      }
    }

  }
</style>
